$mainColor:#fff;
*{
  margin: 0;
  padding: 0;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
html, body{
  height: 100%;
}
li{list-style: none;}

.container{
  width: 375px;
  margin:0px auto;
  position: relative;
  background: #f6f6f6;
  @at-root .head{
    font-size: 16px;
    position: relative;
    height:48px;
    background: $mainColor;
    border-bottom: 1px solid #bebebe;
    @at-root .left{
      color: #a2a09f;
      font-weight: bold;
      position: absolute;
      left:20px;
      top:16px;
    }
    @at-root .title{
      color: #333232;
      font-weight: bold;
      position: absolute;
      top:16px;
      left:153.5px;
      //left:0;
      //right: 0;
      //text-align: center;
    }
  }
  @at-root .main{
    background: #fff;
    padding:0px 20px;
    box-sizing: border-box;
    font-size: 14px;
    @at-root .main ul{
      height: 53px;
      text-align: center;
      line-height: 53px;
      border-bottom: 1px solid #e2e2e2;
      @at-root .main ul li{
        float: left;
        @at-root .main ul li input{
          height: 51px;
          border: none;
          width: 255px;
          color: #cdcdcd;
          outline: none;
        }
        @at-root .main ul li .city{
          width: 241px;
        }
        @at-root .main ul li i{
          width:7px;
          height: 7px;
          display: inline-block;
          transform: rotate(-45deg);
          border-bottom: 2px solid #b1b1b0;
          border-left: 2px solid #b1b1b0;
        }
      }
      @at-root .main ul li:first-child{
        width: 80px;
      }
    }
    @at-root .main ul:last-child{
      border: none;
      margin-bottom:8px;
    }

  }
  @at-root .address{
    height: 53px;
    text-align: center;
    line-height: 53px;
    background: #fff;
    padding:0px 20px;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom:220px;
    @at-root .address ul li{
      float: left;
    }
    @at-root .address ul li:first-child{
      width: 18px;
      height:18px;
      margin:18px 6px 0px 0px;
      border-radius:50%;
      border:1px solid  #dbdbdb;
    }
  }
  @at-root .foot{
    margin-left: 16px;
    @at-root .foot input{
      width: 345px;
      height: 44px;
      border-radius: 5px;
      border: 0;
      background: #fff;
      color: #7d6248;
      font-size: 16px;
      border:1px solid #7d6248;
      margin-bottom: 16px;
      outline: none;
    }
  }
  @at-root .areas{
    height: 608.5px;
    background:rgba(127,127,127,.8);
    display: none;
    position: absolute;
    z-index: 9;
    width: 375px;
    left:0px;
    top:49px;
    margin:0px auto;
    @at-root .area{
     width: 375px;
      height: 450px;
      position: absolute;
      left:0px;
      top:160px;
      font-size: 14px;
      background: $mainColor;
      @at-root .area_title{
        position: relative;
        height: 51.5px;
        padding-top: 15px;
        box-sizing: border-box;
        @at-root .area_title h4{
          font-weight: normal;
          text-align: center;
          color: #666;
        }
        @at-root .area_title rem{
          position: absolute;
          right: 20px;
          top:15px;
          font-weight: bold;
        }
      }
      @at-root .area_choose{
        color: #ff0000;
        padding-left: 11px;
        position: relative;
        height: 29.5px;
        border-bottom: 1px solid #e5e5e5;
        @at-root .area_choose span{
          display: block;
        }
        @at-root .area_choose i{
          display: inline-block;
          background: #ff0000;
          height: 2px;
          width: 40px;
          left:11px;
          top:20px;
          position: absolute;
        }
      }
      @at-root .items{
        height:365px ;
        overflow: auto;
        @at-root .item{
          height: 50px;
          padding-left: 11px;
          line-height: 50px;
          color: #323232;
          border-bottom: 1px solid #e5e5e5;
        }
      }
    }
  }
}










